<template>
  <a-flex justify="space-between" align="center" id="a-flex-56">
    <a-typography-link href="#" class="relative !text-[#c3000b] text-2xl px-1 font-bold pb-2" id="a-typography-link-57">
      能源宏观
      <a-divider class="border-4 border-[#c3000b] absolute -bottom-0.5 inset-x-0 my-0" id="a-divider-58" />
    </a-typography-link>
    <a-typography-link href="#" class="relative !text-[#c3000b] bg-[#eee] h-fit rounded-full px-4 text-lg" id="a-typography-link-59">
      能源安全
    </a-typography-link>
  </a-flex>
  <a-divider class="border-[#c3000b] my-0" id="a-divider-60" />
  <a-row :gutter="30" class="my-6 !mx-0" id="a-row-61">
    <a-col :span="16" class="!pl-0" id="a-col-62">
      <a-flex align="center" class="pl-6 relative mb-4 bg-[#eee]" justify="space-between" id="a-flex-63">
        <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-full" id="a-divider-64" />
        <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-65"> 能源评论 </a-typography-link>
      </a-flex>
      <a-typography-link href="#" id="a-typography-link-66">
        <a-typography-title :level="4" class="text-center" id="a-typography-title-67">
          “我是一贯支持民营企业的” ——习近平同志关心推动民营经济发展纪实
        </a-typography-title>
        <a-typography-paragraph class="!mb-0 text-[#666] indent-5 text-lg" id="a-typography-paragraph-68">
          民营经济，推进中国式现代化的生力军，实现高质量发展的重要基础。长期在地方工作，尤其是在民营经济比较发达省份工作，一路走来，习近平同志一直十分重视支持民营经济健康发展、关心民营企业家健康成长。
        </a-typography-paragraph>
      </a-typography-link>
      <a-flex class="grid grid-cols-2 gap-x-2 my-3 gap-y-2" id="a-flex-69">
        <a-typography-link
          href="#"
          v-for="(item, index) in list6"
          :key="index"
          class="line-clamp-1 !text-[#212121] text-lg"
          :id="`a-typography-link-70-${index}`"
        >
          {{ item }}
        </a-typography-link>
      </a-flex>
    </a-col>
    <a-col
      :span="8"
      v-for="(item, index) in list7"
      :key="index"
      :class="{
        '!pr-0': index === list7.length - 1,
        '!pl-0': index === 1,
      }"
      :id="`a-col-71-${index}`"
    >
      <a-flex align="center" class="pl-6 relative mb-4 bg-[#eee]" justify="space-between" :id="`a-flex-72-${index}`">
        <a-divider
          type="vertical"
          class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-full"
          :id="`a-divider-73-${index}`"
        />
        <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" :id="`a-typography-link-74-${index}`">
          {{ item.title }}
        </a-typography-link>
      </a-flex>
      <a-flex vertical :gap="8" class="mb-8" :id="`a-flex-75-${index}`">
        <a-typography-link href="#" v-for="(item1, index1) in item.list" :key="index1" :id="`a-typography-link-76-${index}-${index1}`">
          <a-typography-text
            v-if="!item1.img"
            class="!text-[#212121] text-lg line-clamp-1"
            :id="`a-typography-text-77-${index}-${index1}`"
            >{{ item1.title }}</a-typography-text
          >
          <a-flex v-else :gap="20" :id="`a-flex-78-${index}-${index1}`">
            <a-typography-link href="#" vertical class="w-2/5" :id="`a-typography-link-79-${index}-${index1}`">
              <a-image :src="item1.img" :preview="false" class="aspect-[3/2]" :id="`a-image-80-${index}-${index1}`" />
            </a-typography-link>
            <a-flex vertical class="flex-1" :id="`a-flex-81-${index}-${index1}`">
              <a-typography-title :level="5" class="line-clamp-1" :id="`a-typography-title-82-${index}-${index1}`">{{
                item1.title
              }}</a-typography-title>
              <a-typography-paragraph class="line-clamp-3 text-[#666] text-lg" :id="`a-typography-paragraph-83-${index}-${index1}`">{{
                item1.desc
              }}</a-typography-paragraph>
            </a-flex>
          </a-flex>
        </a-typography-link>
      </a-flex>
    </a-col>
  </a-row>
  <a-flex justify="space-between" align="center" id="a-flex-86">
    <a-typography-link href="#" class="relative !text-[#c3000b] text-2xl px-1 font-bold pb-2" id="a-typography-link-87">
      能源产业
      <a-divider class="border-4 border-[#c3000b] absolute -bottom-0.5 inset-x-0 my-0" id="a-divider-88" />
    </a-typography-link>

    <a-flex :gap="15" id="a-flex-89">
      <a-typography-link
        href="#"
        class="relative !text-[#c3000b] bg-[#eee] h-fit rounded-full px-4 text-lg"
        v-for="(item, index) in list8"
        :key="index"
        :id="`a-typography-link-90-${index}`"
      >
        {{ item }}
      </a-typography-link>
    </a-flex>
  </a-flex>
  <a-divider class="border-[#c3000b] my-0" id="a-divider-91" />
  <a-row class="!mx-0 mt-4" :gutter="30" id="a-row-92">
    <a-col :span="8" class="!pl-0" id="a-col-93">
      <a-flex align="center" class="pl-6 relative mb-4" justify="space-between" id="a-flex-94">
        <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3" id="a-divider-95" />
        <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-96"> 产业聚焦 </a-typography-link>
      </a-flex>
      <a-flex vertical :gap="8" class="mb-8" id="a-flex-97">
        <a-typography-link href="#" v-for="(item, index) in list9" :key="index" :id="`a-typography-link-98-${index}`">
          <a-typography-text v-if="!item.img" class="!text-[#212121] text-lg line-clamp-1" :id="`a-typography-text-99-${index}`">{{
            item.title
          }}</a-typography-text>
          <a-flex v-else :gap="20" :id="`a-flex-100-${index}`">
            <a-typography-link href="#" vertical class="w-2/5" :id="`a-typography-link-101-${index}`">
              <a-image :src="item.img" :preview="false" class="aspect-[3/2]" :id="`a-image-102-${index}`" />
            </a-typography-link>
            <a-flex vertical class="flex-1" :id="`a-flex-103-${index}`">
              <a-typography-title :level="5" class="line-clamp-1" :id="`a-typography-title-104-${index}`">{{
                item.title
              }}</a-typography-title>
              <a-typography-paragraph class="line-clamp-3 text-[#666] text-lg" :id="`a-typography-paragraph-105-${index}`">{{
                item.desc
              }}</a-typography-paragraph>
            </a-flex>
          </a-flex>
        </a-typography-link>
      </a-flex>
    </a-col>
    <a-col :span="8" id="a-col-106">
      <a-flex vertical v-for="(item, index) in list10" :key="index" :id="`a-flex-107-${index}`">
        <a-flex align="center" class="pl-6 relative mb-2" justify="space-between" :id="`a-flex-108-${index}`">
          <a-divider
            type="vertical"
            class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3"
            :id="`a-divider-109-${index}`"
          />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" :id="`a-typography-link-110-${index}`">
            {{ item.title }}
          </a-typography-link>
        </a-flex>
        <a-flex vertical :gap="5" class="mb-2" :id="`a-flex-111-${index}`">
          <a-typography-link
            href="#"
            class="line-clamp-1 !text-[#333] text-lg"
            v-for="(item1, index1) in item.list"
            :key="index1"
            :id="`a-typography-link-112-${index}-${index1}`"
          >
            <a-badge color="#eaeaea" :id="`a-badge-113-${index}-${index1}`" />
            {{ item1 }}
          </a-typography-link>
        </a-flex>
      </a-flex>
    </a-col>
    <a-col :span="8" class="!pr-0" id="a-col-114">
      <a-flex align="center" class="pl-6 relative mb-2" justify="space-between" id="a-flex-115">
        <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3" id="a-divider-116" />
        <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-117"> 矿产·金属 </a-typography-link>
      </a-flex>
      <a-flex vertical :gap="8" id="a-flex-118">
        <a-typography-link
          href="#"
          v-for="(item, index) in list11"
          :key="index"
          class="!text-[#212121] text-lg line-clamp-1"
          :id="`a-typography-link-119-${index}`"
        >
          {{ item }}
        </a-typography-link>
      </a-flex>
      <a-typography-link href="#" class="flex flex-col my-3" id="a-typography-link-120">
        <a-image src="https://picsum.photos/id/20/1000/800" :preview="false" class="aspect-[5/1]" id="a-image-121" />
      </a-typography-link>
      <a-flex align="center" class="pl-6 relative mb-2" justify="space-between" id="a-flex-122">
        <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3" id="a-divider-123" />
        <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-124"> 化工 </a-typography-link>
      </a-flex>
      <a-flex vertical :gap="8" id="a-flex-125">
        <a-typography-link
          href="#"
          v-for="(item, index) in list12"
          :key="index"
          class="!text-[#212121] text-lg line-clamp-1"
          :id="`a-typography-link-126-${index}`"
        >
          {{ item }}
        </a-typography-link>
      </a-flex>
    </a-col>
    <a-col :span="16" class="!pl-0" id="a-col-128">
      <a-typography-link href="#" class="flex flex-col" id="a-typography-link-129">
        <a-image src="https://picsum.photos/id/35/1000/800" class="aspect-[10/1]" :preview="false" id="a-image-130" />
      </a-typography-link>
    </a-col>
    <a-col :span="8" class="!pr-0" id="a-col-131">
      <a-typography-link href="#" class="flex flex-col" id="a-typography-link-132">
        <a-image src="https://picsum.photos/id/36/1000/800" class="aspect-[5/1]" :preview="false" id="a-image-133" />
      </a-typography-link>
    </a-col>
  </a-row>
</template>

<script setup>
  const list6 = [
    '锚定能源高质量发展方向',
    '“十四五”102项重大工程98%以上的项目已完成规划目标',
    '锚定新质生产力代表委员“把脉开方”促发展',
    '《习近平经济文选》第一卷出版发行',
  ];
  const list7 = [
    {
      title: '能源城市',
      list: [
        {
          title: '青海首个“源网荷储”低压交直流融合示范台区投运',
        },
        {
          title: '外贸订单UP！巨型风电扇叶、钢制家具等加速“出海”',
        },
        {
          title: '近零碳排放园区推动重庆制造业整体向“绿”',
        },
        {
          title: '总投资5.3亿元 黄河“几字弯”历史遗留废弃矿山生态修复工程山西开建',
        },
        {
          title: '内蒙古赤峰：央地企合作，在大兴安岭找锡矿',
        },
      ],
    },
    {
      title: '生态环保',
      list: [
        {
          title: '《中国气候公报（2024年）》发布',
          img: 'https://picsum.photos/id/30/1000/800',
          desc: '2024年，在全球气候变暖背景下，全国平均气温10.9摄氏度，为1951年以来历史最高，全国平均降水量',
        },
        {
          title: '长三角生态绿色一体化发展示范区 明确2025年度77项重点',
        },
      ],
    },
    {
      title: '人事动态',
      list: [
        {
          title: '中国海油原党组成员、副总经理袁光宇接受审查调查',
        },
        {
          title: '王志远被开除党籍',
        },
        {
          title: '中央决定：李乐成任工信部党组书记',
        },
        {
          title: '四川能源发展集团董事长，总经理定了！',
        },
        {
          title: '李乐成任工业和信息化部党组书记',
        },
        {
          title: '乌克兰稀土迷局：有多少矿，哪些在采',
        },
      ],
    },
    {
      title: '环球视野',
      list: [
        {
          title: '美乌矿产“万亿大单” 媒体揭秘双方考量',
        },
        {
          title: '乌克兰稀土迷局：有多少矿，哪些在采',
        },
        {
          title: '“有焦土没稀土”，美盯上的乌矿产价值大吗？',
        },
        {
          title: '美财长：目前没有与乌克兰就矿产协议进行讨论',
        },
        {
          title: '14.8万亿？乌克兰矿产家底大曝光',
        },
        {
          title: '王志远被开除党籍',
        },
      ],
    },
  ];
  const list8 = ['能源之问专访', '培训'];
  const list9 = [
    {
      title: '液冷技术支撑“绿色算力”（创新故事）',
      img: 'https://picsum.photos/id/30/1000/800',
      desc: '随着新一代信息技术发展，尤其是在人工智能应用日益广泛的背景下，高功耗芯片、高密度服务器等部署量攀升，单机柜功率密度增大，对数据中心在绿色高效方面提出了更高要求。',
    },
    {
      title: '主机厂加码全固态电池竞赛 2027年量产诺言能否如期兑现？',
      img: 'https://picsum.photos/id/32/1000/800',
      desc: '2025年，比亚迪掀起“智驾平权”，催化了全行业智能化的课题。上下半场衔接过渡时，被视为2025年，比亚迪掀起“智驾平权”，催化了全行业智能化的课题。上下半场衔接过渡时，被视为',
    },
    {
      title: '工业重镇发力氢能产业（经济新方位·能源新业态）',
    },
    {
      title: '能源大变局：强制配储取消，市场驱动新时代来了',
    },
    {
      title: '“大力水手”+“深海巨人” 我国再添海上风电安装利器',
    },
    {
      title: '新能源发电全面入市，将带来这些变化→',
    },
    {
      title: '退役风机“变废为宝”，不可一味“跟风逐热”',
    },
    {
      title: '矿山无人驾驶商业化渐行渐近',
    },
  ];
  const list10 = [
    {
      title: '电网电力',
      list: [
        '国网北京电力积极开展电力设施保护宣传',
        '国网白银供电公司：“敲门行动”护航民营企业',
        '固态电池产业量产进程提速 全产业链共同推动降本提质',
      ],
    },
    {
      title: '新能源',
      list: ['固态电池产业量产进程提速 全产业链共同推动降本提质', '今年非化石能源消费占比目标提至两成左右'],
    },
    {
      title: '油气',
      list: [
        '国际油价势将结束月线连升势头，关税增产连环打压油市危机四伏',
        '900亿立方米！中俄东线天然气管道累计输气量',
        '煤炭“遇冷” 四年来最低点！两大煤炭协会呼吁控制产量',
      ],
    },
    {
      title: '煤炭',
      list: ['煤炭“遇冷” 四年来最低点！两大煤炭协会呼吁控制产量', '煤炭开采加速向深部进军'],
    },
    {
      title: '核电',
      list: ['中广核广东陆丰核电项目1号机组主体工程开工', '日本岛根核电站2号机组监控设备出现故障', '煤炭开采加速向深部进军'],
    },
  ];
  const list11 = [
    '湖北省发现全国最大铌矿',
    '全球最大产钴国暂停钴出口，钴价会就此起飞吗？',
    '刚果（金）决定暂停钴出口四个月！引爆A股钴板块',
    '推动新能源汽车产业更好发展，需提升有色金属回收水平',
    '稀土行业将迎重磅新规，影响有多大？',
  ];
  const list12 = [
    '磷酸铁锂涨价落地高压密产品成必争之地',
    '有机硅市场供需格局生变行业积蓄“上攻”动能',
    '市场景气 94家基础化工上市公司2024年业绩预喜',
    '春耕行情“催肥”化肥需求生产企业保供稳价工作稳步推进',
    '山东一化工企业要求员工不结婚就离职 律师：公司',
    '市场景气 94家基础化工上市公司2024年业绩预喜',
  ];
</script>
<style></style>
